<template>
  <div class="waterfall">
    <router-link
      :to="{name:'productdetails',query:{data:item} }"
      tag="div"
      v-for="item in newData()"
      :key="item.id"
      class="item"
    >
      <div
        :style="
          'background: url(' +
          item.logImg[0] +
          ');background-repeat: no-repeat;background-size: cover;background-position: center;'
        "
        class="img"
      >
        <div>{{ item.category }}</div>
        <i
          :style="
            'background: url(' + item.img + ');background-size: cover;'
          "
        ></i>
      </div>
      <h2>{{ item.title }}</h2>
      <span>{{ item.content }}</span>
      <p>{{ item.sellout }}</p>
    </router-link>
  </div>
</template>

<script>
export default {
  props: ["datas", "editId"],
  methods: {
    newData() {
      if (this.editId == 1) {
        return this.datas.Attractions.filter((item) => item.type == "short");
      } else if (this.editId == 2) {
        return this.datas.Attractions.filter((item) => item.type == "Long_term");
      }
    },
  },
  
};
</script>

<style lang="scss" scoped>
.waterfall {
    background-color: #fff;

  padding:20px 15px 60px 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: calc(50% - 7px);
    margin-bottom: 9px;
    border-radius: 3px;
    overflow: hidden;
    padding-bottom: 15px;
    box-shadow: 0 1.4px 6.1px rgb(176 176 176 / 50%);
    display: flex;
    flex-direction: column;
    .img {
      width: 167px;
      height: 160px;
      position: relative;
      margin-bottom: 20px;
      width: 100%;

      div {
        position: absolute;
        top: 0;
        left: 0;
        width: 59px;
        color: #fff;

        font-size: 14px;
        box-sizing: border-box;
        padding: 3.5px 8.5px;
        background: linear-gradient(
          120deg,
          rgba(245, 182, 112, 1),
          rgba(234, 126, 119, 1),
          rgba(132, 101, 173, 1),
          rgba(71, 82, 176, 1)
        );
      }
      i {
        display: block;
        position: absolute;
        width: 26px;
        height: 13px;
        bottom: -20px;
        left: 20px;
      }
    }
    h2 {
      margin: 9.5px 15.5px;
      font-size: 14px;
      color: #333333;
      font-weight: bold;
    }
    span {
      color: #999;
      font-size: 12px;
      display: block;
      margin: 0 15.5px;
    }
    p {
      margin: 0 15.5px;
      color: #999;
      margin: 9.5px 15.5px;
    }
  }
}
</style>